<template>
  <header id="topbar">
    <el-row>
      <el-col :span="4" class="topbar-left">
        <el-icon class="icon-kaoshi"><Reading /></el-icon>&nbsp;
        <span class="title" @click="index()">EXAM-MANAGE</span>
      </el-col>
      <el-col :span="20" class="topbar-right">
        <el-icon @click="$store.commit('changeflag')" size="25" class="el-icon-menu"><Menu/></el-icon>
        <div class="user">
          <span>{{userInfo.userName}}</span>
          <transition name="fade">
            <el-dropdown>
              <img src="@/assets/img/user.jpg" class="user-img" ref="img"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="intoUserInfo">用户信息</el-dropdown-item>
                  <el-dropdown-item class="exit" @click="exit()">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </transition>
        </div>
      </el-col>
    </el-row>
  </header>
</template>

<script>
import {Menu,Reading} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import AES from "@/utils/AESUtil";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "manageHead",
  components: {Menu,Reading},
  setup(){
    const router = useRouter()
    const store = useStore()
    // eslint-disable-next-line no-undef
    let role = ref(AES.Decrypt($cookies.get("role")))
    let userInfo = reactive({
      // eslint-disable-next-line no-undef
      userId: $cookies.get("id"),
      // eslint-disable-next-line no-undef
      userName: $cookies.get("name")
    })
    function index() {
      router.push({path: '/manage'})
    }
    function intoUserInfo() {
      if (role.value === '0') {
        router.push({path: '/adminManager'})
      }else if (role.value === '1'){
        router.push({path: '/teacherManager'})
      }
    }
    function exit(){
      // eslint-disable-next-line no-undef
      if(AES.Decrypt($cookies.get("role")) === '0') {
        store.state.menu.pop()
      }
      router.push({path:"/"}) //跳转到登录页面
      ElMessage({
        type: 'success',
        message: '退出登录',
      })

      // eslint-disable-next-line no-undef
      $cookies.remove("name") //清除cookie
      // eslint-disable-next-line no-undef
      $cookies.remove("id")
      // eslint-disable-next-line no-undef
      $cookies.remove("role")
    }

    return{
      userInfo,
      exit,
      index,
      intoUserInfo
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .7s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

#topbar {
  position: relative;
  z-index: 10;
  background-color: #124280;
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}
#topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.topbar-left {
  font-size: 60px;
}
.icon-kaoshi{
  font-size: 50px;
  margin-top: 10px;
}
.topbar-left .title {
  font-size: 20px;
  cursor: pointer;
}
.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}
.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}
.topbar-right .user .user-img {
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}
.user .out {
  font-size: 10px;
  position: absolute;
  top: 80px;
  right: 0px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 12px;
}
.user .out ul {
  list-style: none;
}
.user .out ul > li {
  height: 30px;
  line-height: 30px;
}
.out a {
  text-decoration: none;
  color: #000;
}
.out .exit {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}
</style>